<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ include file="/jsp/employInfo/taglib/taglib.jsp"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src=""></script>

<script type="text/javascript"
	src="<c:url value="/js/jquery-1.7.2.js" />"></script>

<script type="text/javascript">
	$(document)
			.ready(
					function() {
						$("button#ii").click(function() {
							$("p").css({
								"background-color" : "yellow",
								"font-size" : "200%"
							});
							$("button#dd").css({
								"background-color" : "yellow",
								"font-size" : "200%"
							});
						});
						$("button#aj").click(function(){
							$("#txt1").load("/jk/js/jquery-1.7.2.js")
						})
					});

	/*
	function load() {
		var para = document.createElement("p");
		var node = document.createTextNode("This is a new paragraph.");
		para.appendChild(node);
		var element = document.getElementById("div1");
		element.appendChild(para);
	}
	var xmlhttp;

	function loadXMLDoc() {
		var xmlhttp;
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET", "/employInfo/list", true);
		xmlhttp.send();

	}

	function LoadXMLDoc2(url, cfc) {

		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else
			xmlhttp = new ActiveXObject("Microscft.XMLHTTP");

		xmlhttp.onreadystatechange = cfc;
		xmlhttp.open("GET", url, true);
		xmlhttp.send();
	}

	function myFunction() {
		LoadXMLDoc2(
				"/employInfo/list",
				function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						document.getElementById("myDiv2").innerHTML = xmlhttp.responseText;
					}
				})
	}

	var newElement = document.Document.createElement('p');
	 */
</script>
</head>
<body>

<button id="aj">ajax</button>
<h6 id="txt1"></h6>
<hr>
	<div id="myDiv"></div>

	<div id="myDiv2"></div>

	<div id="div1"></div>
	<button id="d1">d1</button>
	<hr>



	<button id="dd">try.css()</button>
	<button id="ii">css()体现</button>
	<p>loop</p>

	<button id="hide">hide/show</button>
	<p class="jack">will be hide</p>

	<button id="1">fadeToggle</button>
	<p class="jack_1_text">jack_1_text-fadIn/fadOut</p>

	<br>
	<button id="appendTo">appendTo-Many</button>
	<h1>manys/</h1>
	<button class="fi">filter</button>
	<p class="intro">ABC</p>
	<p>ABC</p>
	<script type="text/javascript">
		var fid = document.createElement("div");
		var para = document.createElement("p");
		var node = document.createTextNode("This is a new paragraph.");
		para.appendChild(node);
		fid.appendChild(para);

		$("#hide").click(function() {
			$("p.jack").toggle();
		});

		$("#1").click(function() {
			$('p.jack_1_text').slideToggle();
		});

		$('button#appendTo').click(function() {
			$("<b>manyToappends/</b>").appendTo("p,h1");
		})
		$("button#d1").click(function() {
			$("#div1").width(320).height(320).css({
				"background-color" : "yellow"
			});
		})

		$("button.fi").click(function() {
			$("p").filter(".intro").css({
				"background-color" : "yellow"
			});
		});
	</script>
</body>
</html>